<template>
  <div class="app-container">
    <el-row style="padding-bottom:10px">
      <el-col :span="4">
        <strong style="font-size: 20px;">
          考勤码
        </strong>
      </el-col>
      <el-col :span="20" align="right">
        <span style="margin-right: .5em">
          <el-select
            v-model="type"
            style="width: 150px;"
            placeholder="班次"
            filterable
            @change="chooseType($event)"
          >
            <el-option
              v-for="item in types"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </span>
        <span style="margin-right: .5em">
          <el-select
            v-model="option"
            style="width: 150px;"
            filterable
            @change="chooseOption($event)"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </span>
      </el-col>
    </el-row>

    <el-row style="text-align:center;">
      <div style="font-size: 30px;padding-bottom: 10px;">
        <span v-if="store" style="margin-right: 2em">{{ store.__toString }}</span>
        <span v-if="type && types.length > 0" style="margin-right: 2em">{{ typeName }}</span>
        <span>{{ optionName }}</span>
      </div>
      <el-image
        style="width: 500px; height: 500px"
        :src="code"
        lazy
      />
      <div v-if="endTime" class="text">{{ new Date(endTime ) | dateFormat('YYYY-MM-DD HH:mm:ss') }}前有效</div>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      store: null,
      type: null,
      typeName: '',
      types: [],
      option: 1,
      optionName: '上班',
      options: [{
        name: '上班',
        id: 1
      }, {
        name: '落班',
        id: 0
      }],
      code: '',
      endTime: null,
      timer: null
    }
  },
  async created() {
    const user = await this.axios.get(`/api/user`, { params: {
      '@expands': `['entity.officer']`
    }})
    if (user.data.officer) {
      this.store = user.data.officer.__metadata.store
    }
    this.getAttendanceTypes()
  },
  mounted() {
    this.updateCode()
  },
  beforeDestroy() {
    console.log('离开页面')
    if (this.timer) { clearInterval(this.timer) }
    this.timer = null
  },
  methods: {
    chooseType(e) {
      const type = this.types.find(v => v.id === e)
      if (type) {
        this.typeName = type.name
      }
      this.createQrcode()
    },
    chooseOption(e) {
      const option = this.options.find(v => v.id === e)
      if (option) {
        this.optionName = option.name
      }
      this.createQrcode()
    },
    getAttendanceTypes() {
      if (this.store) {
        this.axios.get(`/api/attendance-types`, { params: {
          '@filter': `entity.getStore().getId() == ${this.store.id}`,
          limit: 10000000
        }}).then((res) => {
          if (res.data.length > 0) {
            this.types = res.data
            this.type = res.data[0].id
            this.typeName = res.data[0].name
            this.createQrcode()
          } else {
            this.$message.warning('相应门店没有设置班次')
          }
        })
      }
    },
    updateCode() {
      if (this.timer) { clearInterval(this.timer) }
      this.timer = setInterval(() => {
        this.createQrcode()
      }, 10000)
    },
    createQrcode() {
      if (!this.type) {
        this.$message.warning('请选择班次！')
        return
      }
      const now = (new Date()).getTime()
      const endTime = now + 20000
      // 加20s，作为有效时间
      this.endTime = endTime
      const code = `https://pub.nightkper.com/qr-code/mini-program?page=pages/team/clock&scene=${this.store.id}*${endTime}*${this.type}*${this.option}`
      console.log(code)
      this.code = `${code}`
    }
  }
}
</script>

<style lang="scss" scoped>
.background {
  background-color: #f0f0f0;
  padding: 15px 15px 15px 15px;
  border-radius: 10px;
}
.detail {
  background-color: white;
  padding: 20px;
  text-align: center;
}
.text {
  font-size: 24px;
  padding-top: 10px;
}
</style>
